<template>
	<view class="d_convidar">
		<game-header />

		<view class="d_co_con d_border12">
			<view class="d_co_tabs">
				<u-tabs :list="tabList" :inactiveStyle="{color: '#fff'}" :activeStyle="{color: '#4180ed'}"
					@change="changeTabs"></u-tabs>
			</view>

			<view class="tabs_items">
				<template v-if="tabsIndex == 0">
					<invite />
				</template>
				<template v-else-if="tabsIndex == 1">
					<statistics />
				</template>
				<template v-else-if="tabsIndex == 2">
					<be-invited />
				</template>
				<template v-else-if="tabsIndex == 3">
					<bonus />
				</template>
				<template v-else>
					<details />
				</template>
			</view>

		</view>
		<!-- 邀请 -->
		<view class="allinvites">
			<text class="title"> {{$t('convidar.text15')}}</text>
			<view class="allinvites-top">
				<view class="left" style="display: flex;align-items: center;">
					<!-- <view style="margin-top: 30rpx" @click="show=true">
					            日期选择器1：默认选中日期
					        </view> -->
					<view @click="allbtnOK(1)" style="font-size: 25rpx;">
						{{ date }}
					</view>
					<text style="margin: 0 10rpx;font-size: 25rpx;">{{$t('atleast')}}</text>
					<view @click="allbtnOK(2)" style="font-size: 25rpx;">
						{{ date2 }}
					</view>
					<DatePicker :showLabel="false" :show="show" value="2025-05-06" @confirm="dateChange"
						@cancel="show=false" />
					<!--     <DatePicker :showLabel="true" :show="show1" :value="defaultDate" @confirm="dateChange" @cancel="show1=false" /> -->

				</view>
				<!-- 	<view class="left">
					2024/4/28-2024/4/30
				</view> -->
				<view class="right">
					<input type="text" class="members" @focus="handleInput" v-model="inputValue"
						@input="handleInput2"  style="width: 150rpx;"/>
					<text style="color: #fff;" class="membertext" v-if="isshow">{{$t('entermember')}}</text>
					<image src="../../static/suo.png"  @click="btnOK" class="images"></image>
				</view>
			</view>
			<view class="allinvites-tenter">
				<!-- <text>加入时间</text>
				
				<text>会员ID</text>
				<text>定金</text>	
				<text>有效投注</text>
				<text>总损失和收益</text> -->
				<text style="width: 35%;display:block; text-align: center;">{{$t('Joinedat')}}</text>
				<text style="width: 10%;display:block;ext-align: center;">{{$t('memberID')}}</text>
				<text style="width: 10%;display:block;ext-align: center;">{{$t('deposits')}}</text>
				<text style="width: 10%;display:block;ext-align: center;">{{$t('betting')}}</text>
				<text style="width: 35%;display:block;ext-align: center;">{{$t('Total Losses and Wins')}}</text>
			</view>
			<view  class="alltenter">
				<view class="allinvites-below" v-for="(item,index) in list" :key="index">
					<text style="width: 35%;display:block; text-align: center;">{{item.createtime}}</text>
					<text style="width: 10%;display:block;ext-align: center;">{{item.id}}</text>
					<text style="width: 10%;display:block;ext-align: center;">{{item.recharge}}</text>
					<text style="width: 10%;display:block;ext-align: center;">{{item.count}}</text>
					<text style="width: 35%;display:block;ext-align: center;"><text style="color: green;">-{{item.lost}}</text>/<text style="color: red;">+{{item.win}}</text></text>
				</view>
				
			</view>
		
		
		<!-- 	<view class="" v-for="(item,index) in list" :key="index">
				<text>加入时间</text>
				<text>会员ID</text>
				<text>定金</text>
				<text>有效投注</text>
				<text>总损失和收益</text>
			</view> -->

		</view>
		<!-- 底部 -->
		<game-footer />
		<game-tabbar :tabbarValue="1" />

	</view>
</template>

<script>
	import { toast } from '@/utils/common'
	import DatePicker from "./components/invites/components/dragon-datePicker/dragon-datePicker.vue"
	import {
		listsearch
	} from "../../api/login.js"
	// 邀请
	import Invite from './components/invite.vue'
	// 统计
	import Statistics from './components/statistics.vue'
	// 受邀
	import BeInvited from './components/be-invited.vue'
	// 奖金
	import Bonus from './components/bonus.vue'
	// 详情
	import Details from './components/invite.vue'
	import {
		inviteLink,
		invitationList
	} from '@/api/convidar.js'
	import {
		eventDetails
	} from '@/api/jogos.js'
	export default {
		components: {
			Invite,
			Statistics,
			BeInvited,
			Bonus,
			Details,
			DatePicker
		},
		data() {
			return {
				tabList: [{
						name: this.$t('convidar.text1')
					},
					{
						name: this.$t('convidar.text2')
					},
					// {
					// 	name: '受邀人士'
					// },
					// {
					// 	name: '奖金'
					// },
					// {
					// 	name: '邀请详情'
					// },
				],

				currTab: this.$t('convidar.tabs1'),

				inviteLink: '',
				content: '',

				invitationLists: [],
				invitationList: [],

				tabsIndex: 0,

				activeDate: 0,
				// 日期组件
				showDatepicker: false, // 控制日期选择器的显示与隐藏
				startDate: '2020-01-01', // 开始日期
				endDate: '2025-12-31', // 结束日期
				// input
				inputValue: '',
				isshow: true,
				// 设置时间
				defaultDate: '',
				date: '---',
				date2: '---',
				show: false,
				// show1: false,
				index: 1,
				inviteobj: {
					startTime: '',
					endTime: '',
					userId: '',
				},
				list:[],


			};
		},
		onLoad() {
			this.getInviteLink()
			this.btnOK()
		},
		methods: {
			clickTCTabs({
				type
			}) {
				this.invitationList = this.invitationLists[type]
				if (type == 'tier1') {
					this.summation = 'one'
				} else if (type == 'tier2') {
					this.summation = 'two'
				} else if (type == 'tier3') {
					this.summation = 'three'
				}
			},

			async getInviteLink() {
				let {
					code,
					data
				} = await inviteLink()
				if (code == 200) {
					this.inviteLink = data.share_link
				}
			},


			// 复制内容
			copyData() {
				let _this = this
				uni.setClipboardData({
					data: _this.inviteLink,
					success: function() {
						_this.$modal.msg(_this.$t('mine.text27'))
					}
				})
			},

			changeTabs({
				index
			}) {
				this.tabsIndex = index
			},
			handleInput() {
				console.log()
				if (this.inputValue) {
					this.isshow = false
				} else if (this.inputValue == '') {
					this.isshow = true
				}
				this.inviteobj.userId=this.inputValue
				console.log(this.inputValue, "this.inputValue--");
			},
			handleInput2() {
				console.log()
				if (this.inputValue) {
					this.isshow = false
				} else if (this.inputValue == '') {
					this.isshow = true
				}
				this.inviteobj.userId=this.inputValue
				console.log(this.inputValue, "this.inputValue2--");
			},
			async btnOK() {
				let res = await listsearch(this.inviteobj)
				 console.log(res,"222res------")
				   // this.list=res.data.data
				if (res.code == 200) {
                   this.list=res.data.data
				      // toast(res.msg)
				   	console.log("调用了接口成功了")
				}
			},
			// 时间选择器
			dateChange(v) {
				this.show = false
				// this.show1 = false
				if (this.index == 1) {
					// inviteobj: {
					// 	startTime: '',
					// 	endTime: '',
					this.date = v
					this.inviteobj.startTime=this.date
				} else if (this.index == 2) {
					this.date2 = v
					this.inviteobj.endTime=this.date2
				}
				this.btnOK()

			},
			allbtnOK(type) {
				if (type == 1) {
					this.index = type
				} else if (type == 2) {
					this.index = type
				}
				this.show = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.d_convidar {
		margin-top: 80rpx;
		padding-top: 80rpx;
		color: #fff;

		.d_co_tabs {
			padding: 20rpx 0;
			// justify-content: space-around;

			&>view {
				align-items: center;
				color: #888;

				&>view {
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
				}
			}

			.curr_tabs {
				position: relative;
				color: #fff;

				&::before {
					content: '';
					position: absolute;
					bottom: -20rpx;
					left: 46%;
					background-color: #49acfb;
					width: 70rpx;
					height: 4rpx;
				}
			}
		}

		.tabs_items {
			padding: 20rpx;
		}

		.d_co_con {
			background-color: #1e2531;

		}
	}

	.allinvites {
		margin-top: 30rpx;
		width: 100%;
		height: 700rpx;
		
		background-color: #1e2531;
		padding: 20rpx;
	}

	.allinvites .title {
		text-align: center;
		font-size: 30rpx;
		padding: 0 0 20rpx 0;
		width: 100%;
		display: block;
	}

	.allinvites-tenter {
		padding: 20rpx 0;
		display: flex;
	text-align: center;
		background-color: #1c1b36;
		border-radius: 3rpx solid #1e2531;
		  word-wrap: break-word;
	}
    .allinvites-below{
		padding: 20rpx 0;
		display: flex;
		text-align: center;
		  word-wrap: break-word;
		// justify-content: center;
		// background-color: #8a7968;
		border-radius: 3rpx solid #1e2531;
	}
	.allinvites-below text {
		color: #fff;
		font-size: 30rpx;
	}
	
	.allinvites-tenter text {
		color: #fff;
		font-size: 30rpx;
	}

	.allinvites-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		position: relative;

	}

	.allinvites-top .left {
		font-size: 35rpx;
		color: #ddb68d;
		padding: 10rpx 30rpx;
		border-radius: 30rpx;
		border: 3rpx solid #a1622b47;

	}

	.allinvites-top .right {
		width: 280rpx;
		// width: 53%;
		display: flex;
		font-size: 30rpx;
		color: #ddb68d;
		padding: 0rpx 30rpx;
		border-radius: 30rpx;
		border: 3rpx solid #a1622b47;
	}

	.uni-input-input::placeholder {
		color: blue !important;
		/* 设置文字颜色为蓝色 */
	}

	.membertext {
		font-size: 25rpx;
		position: absolute;
		top: 15rpx;
		color: #ddb68d;
	}

	.members {
		z-index: 1000;
	}
	.images{
		width: 20rpx;
		height: 20rpx;
		line-height: 40rpx;
		position: absolute;
		right: 25rpx;
		top:16rpx;
	}
	.alltenter{
		overflow: scroll;
		height: 400rpx;
	}
</style>